<template>
  <div id="call-volume">
    <div class="search-input">
      <div @click.stop style="display:inline-block;">
        <el-input v-model="search" placeholder="输入姓名进行搜索..." class="search" clearable @keyup.enter.native="queryValue('show')">
        </el-input>
        <i class="iconfont icon-sousuo" @click="searchInput"></i>
        <i :class="['iconfont','icon-xiala',advancedSearch?'bgc':'rotate']" @click="toggleAdvanceSearch" ref="xiala"></i>
        <i class="search-flag" v-show="isSelected"></i>
        <i class="separate"></i>
      </div>
      <el-button type="primary" size="mini" @click="exportExcel" :loading="downLoading">{{downLoading?"下载中":"导出Excel"}}</el-button>
      <div v-show="isSearch" @click.stop>
        <div class="search-area" v-show="advancedSearch" :key="1">
          <el-form :inline="true" :model="searchValue" class="demo-form-inline">
            <!-- <el-form-item label="角　　色" class="mr34">
              <el-select v-model="searchValue.role" placeholder="请选择" :disabled="true">
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职　　级">
              <el-select v-model="searchValue.levelId" placeholder="请选择" :disabled="bool">
                <el-option
                  v-for="item in levelList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="呼叫类型" class="mr34">
              <el-select v-model="searchValue.callType" placeholder="全部">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="查询范围">
              <el-select v-model="searchValue.range" placeholder="全部">
                <el-option
                  v-for="item in options4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时　　间">
              <el-date-picker
                v-model="searchValue.date"
                type="daterange"
                :start-placeholder="searchTime"
                :end-placeholder="searchTime"
                value-format="yyyy-MM-dd"
                unlink-panels
                :picker-options="pickerOptions2"
                :default-time="['00:00:00', '23:59:59']"
                :class="[searchValue.date?'is-date':'']">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <el-button size="mini" class="reset" @click="resetInput">重置</el-button>
          <el-button type="primary" size="mini" @click="queryValue">查询</el-button>
        </div>
        <div class="search-content-area" v-show="!advancedSearch" :key="2">
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * @author 陈涛
 * @information 通话量搜索区域
 * @date 2019-01-13
 */
export default {
  props: {
    bool: Boolean,
    required: true,
    levelList: Array,
    downLoading: Boolean
  },
  data () {
    return {
      searchValue: {
        role: null, // 角色
        levelId: null, // 职级
        callType: null, // 呼叫类型
        range: null, // 查询范围
        date: null, // 时间
        departmentId: null // 部门
      },
      searchTime: '',
      search: null, // 搜索
      isSearch: false, //是否要搜索，默认false,包括高级搜索和姓名搜索
      advancedSearch: false, // 是否高级搜索，默认false
      isSelected:false, //高级搜索是否有选中选项，默认false
      options1: [
        {
          value: '选项1',
          label: '请选择'
        },
        {
          value: '选项2',
          label: '店长'
        },
        {
          value: '选项3',
          label: '店员'
        }
      ],
      options2: [
        {
          value: '选项1',
          label: '请选择'
        },
        {
          value: '选项2',
          label: 'A2'
        },
        {
          value: '选项3',
          label: 'A3'
        }
      ],
      options3: [
        {
          value: null,
          label: '全部'
        },
        {
          value: -1,
          label: '呼入'
        },
        {
          value: 1,
          label: '呼出'
        }
      ],
      options4: [
        {
          value: null,
          label: '全部'
        },
        {
          value: false,
          label: '直营'
        },
        {
          value: true,
          label: '加盟'
        }
      ],
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  mounted () {
    /**
     * @author 赵美阳
     * @information 选择时间组件重置按钮绑定事件，刷新表单
     * @date 2019-04-04
     */
    document.getElementsByClassName('el-range__close-icon')[0].addEventListener('click',()=>{
      this.queryValue('no');
    })
    /**
     * @author 赵美阳
     * @information 点击除搜索下拉框外的位置隐藏下拉框
     * @date 2019-04-01
     */
    document.addEventListener('click',(e)=>{
      this.hiddenSearch();
    });
    this.searchTime = new Date().toLocaleDateString().replace(/\//g, '-')
  },
  methods: {
     /**
     * @author 赵美阳
     * @information 高级搜索展开隐藏切换
     * @date 2019-03-29
     */
    toggleAdvanceSearch:function(){
      this.isSearch = this.advancedSearch = ! this.advancedSearch
      this.advanceSearchContent();
    },
    /**
     * @author 赵美阳
     * @information 隐藏高级搜索下拉框
     * @date 2019-03-29
     */
    hiddenSearch:function(){
      this.isSearch = this.advancedSearch = false
      this.advanceSearchContent()
    },
    /**
     * @author 赵美阳
     * @information 判断高级搜索下拉框中是否有选中的内容
     * @date 2019-04-01
     */
    advanceSearchContent:function(){
      for(var key in this.searchValue){
        if (this.searchValue[key]){
          this.isSelected = true
          return
        } else {
          this.isSelected = false
        } 
      }
    },
    /**
     * @author 陈涛
     * @information 清空输入框内容
     * @date 2019-01-13
     * @param {*} resetInput 点击清空输入框内容
     */
    resetInput: function () {
      let searchValue = {
        role: null, // 角色
        rank: null, // 职级
        callType: null, // 呼叫类型
        range: null, // 查询范围
        date: null, // 时间
        department: null // 部门
      }
      this.search = null
      this.searchValue = searchValue
      this.searchTime = new Date().toLocaleDateString().replace(/\//g, '-')
      this.$emit('query', this.searchValue)
      //关闭下拉搜索框
      this.hiddenSearch()
    },
    /**
     * @author 陈涛
     * @information 对搜索输入框内容进行搜索
     * @date 2019-01-16
     * @param {*} searchInput 根据输入框内容进行查询数据
     */
    searchInput: function () {
      this.search ? this.$emit('search', {name: this.search, is: 'search'}):''
    },
    /**
     * @author 陈涛
     * @information 进行条件查询具体信息
     * @date 2019-01-16
     * @param {*} query 查询信息
     */
    queryValue: function (val) {
      //点击查询按钮切换下拉框
      this.$emit('search', {name: this.search, is: ''})
      this.$emit('query', this.searchValue)
      val === 'no' ? '' : this.hiddenSearch()
      this.$emit('isSearch')
    },
    /**
     * @author 王磊
     * @information 导出excel
     * @date 2019-01-16
     */
    exportExcel () {
      this.$emit('exportExcel')
    }
  }
}
</script>
